<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Implementation</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Element UI JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div id="router-view"></div>
    <div id="dialog" class="el-dialog__wrapper" style="display: none;">
        <div class="el-dialog">
            <div class="el-dialog__header">
                <span class="el-dialog__title">绑定手机</span>
            </div>
            <div class="el-dialog__body">
                <form id="dataForm">
                    <h4>绑定你的手机号</h4>
                    <div class="el-form-item">
                        <label class="el-form-item__label">手机号码</label>
                        <div class="el-form-item__content">
                            <input id="phone" class="el-input__inner" type="text">
                        </div>
                    </div>
                </form>
            </div>
            <div class="el-dialog__footer">
                    <span class="dialog-footer">
                        <button id="saveBtn" class="el-button el-button--primary el-button--small">
                            <i class="el-icon-check"></i> 确 定
                        </button>
                    </span>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        var vm = new Vue({
            el: '#app',
            data: {
                show: true,
                dialogVisible: false,
                bindPhoneVo: {
                    openId: '',
                    phone: ''
                }
            },
            created: function() {
                this.wechatLogin();
            },
            methods: {
                wechatLogin: function() {
                    // 先清除token缓存
                    localStorage.removeItem('token');
                    var token = this.getQueryString('token') || '';
                    var openId = this.getQueryString('openId') || '';
                    if (token === '' && openId !== '') {
                        this.bindPhoneVo.openId = openId;
                        $('#dialog').show();
                    } else {
                        if (token !== '') {
                            localStorage.setItem('token', token);
                        }
                        token = localStorage.getItem('token') || '';
                        if (token == '') {
                            window.location = 'http://mu7s2k.natappfree.cc/kabigon/wechat/authorize?redirectUrl=' + encodeURIComponent(window.location.href);
                        } else {
                            // window.location = 'http://mu7s2k.natappfree.cc/kabigon/cherry.html'
                            console.log(window.location.href)
                        }
                    }
                },
                saveBind: function() {
                    var phone = $('#phone').val();
                    if (phone.length !== 11) {
                        alert('手机号码格式不正确');
                        return;
                    }
                    this.bindPhoneVo.phone = phone;
                    var self = this;
                    $.ajax({
                        url: 'http://mu7s2k.natappfree.cc/kabigon/wechat/bindPhone',
                        method: 'POST',
                        contentType: 'application/json', // 指定请求的内容类型为JSON
                        data: JSON.stringify(self.bindPhoneVo),
                        success: function(response) {
                            localStorage.setItem('token', response.data);
                            $('#dialog').hide();
                            window.location = 'http://mu7s2k.natappfree.cc/kabigon/cherry.html';
                        },
                        error: function(xhr, status, error) {
                            console.error(xhr.responseText);
                        }
                    });
                },
                getQueryString: function(paramName) {
                    if (window.location.href.indexOf('?') === -1) return '';
                    var searchString = window.location.href.split('?')[1];
                    var params = searchString.split("&");
                    for (var i = 0; i < params.length; i++) {
                        var val = params[i].split("=");
                        if (val[0] === paramName) {
                            return val[1];
                        }
                    }
                    return '';
                }
            }
        });

        $('#saveBtn').click(function() {
            vm.saveBind();
        });
    });
</script>
</body>
</html>
